<template>
  <!-- 2.5d 柱状，折线 -->
  <div
    class="Radar"
    :id="eleId"
    :style="{ width: width + 'px', height: height + 'px' }"
  ></div>
</template>

<script>
import * as echarts from "echarts";
export default {
  name: "Radar",
  inject: ["provideTitleTextStyle"],
  props: {
    eleId: String,
    width: { type: Number, default: 500 }, //宽度
    height: { type: Number, default: 250 }, //高度
    color: {
      type: Array,
      default: () => {
        return ["#00A1FF", "#5CE0E2"];
      },
    }, //颜色
    legend: { type: Boolean, default: false }, //是否显示图例
    legendPosi: { type: Array, default: () => ["top", "right"] }, // 图例位置
    background: { type: String, default: "#010d3a" },
    round: { type: Boolean, default: false },
    area: { type: Boolean, default: false },
    areaStyle: {
      type: String,
      default: "",
    },
    source: {
      type: Object,
      default: () => {
        return {
          name: ["20以下", "21-30", "31-40", "41-50", "51-60", "60以上"],
          series: [
            {
              data: [32, 58, 64, 64, 64, 25],
              type: "bar",
              name: "男",
              stack: "total",
            },
            // { data: [32, 58, 64, 64, 64, 25], type: "bar", name: "女", stack:"total" },
            // {
            //   data: [76, 124, 167, 241, 100, 85],
            //   type: "line",
            //   name: "总数",
            //   color: "",
            // },
            // {
            //   data: [88, 113, 142, 127, 80, 40],
            //   type: "line",
            //   name: "总数",
            //   color: "",
            // },
          ],
        };
      },
    }, //是否显示图例
    title: { type: String, default: "" },
    remark: { type: String, default: "" },
    titlePosi: {
      type: Array,
      default: () => {
        return ["top", "left"];
      },
    },
    grid: {
      type: Object,
      default: () => {
        return {
          left: "13%",
          right: "6%",
          top: "10%",
          bottom: "20%",
        };
      },
    },
  },
  data() {
    return {
      options: {},
    };
  },
  mounted() {
    this.checkDomExist();
  },
  methods: {
    setOption() {
      // let xData = ["20以下", "21-30", "31-40", "41-50", "51-60", "60以上"];
      let dom = 300;
      let barWidth = dom / 20;
      let colorArr = [[], []];
      let barOffset = [
        [
          ["-63%", "50%"],
          ["-63%", "-50%"],
        ],
        [
          ["63%", "50%"],
          ["63%", "-50%"],
        ],
      ];
      for (let i = 0; i < 10; i++) {
        colorArr[0].push({
          type: "linear",
          x: 0,
          x2: 1,
          y: 0,
          y2: 0,
          colorStops: [
            {
              offset: 0,
              color: "#73fcff", // 最左边
            },
            {
              offset: 0.5,
              color: "#86eef1", // 左边的右边 颜色
            },
            {
              offset: 0.5,
              color: "#5ad6d9", // 右边的左边 颜色
            },
            {
              offset: 1,
              color: "#3dc8ca",
            },
          ],
        });
        colorArr[1].push({
          type: "linear",
          x: 0,
          x2: 1,
          y: 0,
          y2: 0,
          colorStops: [
            {
              offset: 0,
              color: "#ffd680", // 最左边
            },
            {
              offset: 0.5,
              color: "#ffd882", // 左边的右边 颜色
            },
            {
              offset: 0.5,
              color: "#f2c258", // 右边的左边 颜色
            },
            {
              offset: 1,
              color: "#f1bf52",
            },
          ],
        });
      }
      let seriesData = [];
      let barArr = [],
        lineArr = [];
      for (let i = 0, len = this.source.series.length; i < len; i++) {
        if (this.source.series[i].type === "bar") {
          barArr.push(this.source.series[i]);
        } else if (this.source.series[i].type === "line") {
          lineArr.push(this.source.series[i]);
        }
      }
      for (let j = 0; j < barArr.length; j++) {
        seriesData.push({
          name: barArr[j].name,
          type: "bar",
          barWidth: barWidth,
          itemStyle: {
            normal: {
              color: function (params) {
                return colorArr[j][params.dataIndex % 7];
              },
            },
          },
          data: barArr[j].data,
        });
        seriesData.push({
          z: 2,
          type: "pictorialBar",
          data: barArr[j].data,
          symbol: "diamond",
          symbolOffset:
            barArr.length >= 2
              ? barOffset[j][0]
              : barArr.length === 1
              ? ["-0%", "50%"]
              : [],
          symbolSize: [barWidth, barWidth * 0.5],
          itemStyle: {
            normal: {
              color: function (params) {
                return colorArr[j][params.dataIndex % 7];
              },
            },
          },
        });
        seriesData.push({
          z: 3,
          type: "pictorialBar",
          symbolPosition: "end",
          data: barArr[j].data,
          symbol: "diamond",
          symbolOffset:
            barArr.length >= 2
              ? barOffset[j][1]
              : barArr.length === 1
              ? ["-0%", "-50%"]
              : [],
          symbolSize: [barWidth, barWidth * 0.5],
          itemStyle: {
            normal: {
              borderWidth: 0,
              color: function (params) {
                return colorArr[j][params.dataIndex % 7].colorStops[0].color;
              },
            },
          },
        });
      }
      for (let k = 0; k < lineArr.length; k++) {
        seriesData.push({
          name: lineArr[k].name,
          type: "line",
          showAllSymbol: true,
          symbol: this.round ? "circle" : "none",
          symbolSize: 10,
          smooth: true,
          areaStyle: this.area
            ? {
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: this.areaStyle
                        ? this.areaStyle
                        : this.color[k] + "AA",
                    },
                    {
                      offset: 1,
                      color: this.areaStyle
                        ? this.areaStyle
                        : this.color[k] + "00",
                    },
                  ]),
                },
              }
            : null,
          itemStyle: {
            color: "#fff",
            shadowColor: this.color[k],
            shadowBlur: 20,
            borderColor: this.color[k],
            borderWidth: 5,
          },
          lineStyle: {
            width: this.round ? 4 : 1,
            color: this.color[k],
            shadowColor: this.color[k],
            shadowBlur: 20,
          },
          data: lineArr[k].data,
        });
      }
      this.options = {
        title: {
          text: this.title,
          subtext: this.remark,
          top: this.titlePosi[0],
          left: this.titlePosi[1],
          padding: 0,
          textStyle: {
            fontSize: 14,
            color: "#FFFFFF",
          },
          subtextStyle: {
            fontSize: 12,
            color: "#FFFFFF",
          },
        },
        backgroundColor: this.background,
        //提示框
        tooltip: {
          trigger: "axis",
          formatter: function (p) {
            let div = `
                ${p[0].name}
                <br/>
                ${p[0].seriesName}:${p[0].value}
                <br/>
                ${p.length > 3 ? p[3].seriesName : p[1].seriesName}:${
              p.length > 3 ? p[3].value : p[1].value
            }
            `;
            return div;
          },
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        legend: {
          show: this.legend,
          data: this.source.series.map((v) => {
            return v.name;
          }),
          textStyle: {
            fontSize: 16, //字体大小
            color: "#ffffff", //字体颜色
          },
          x: this.legendPosi[1], //可设定图例在左、右、居中
          y: this.legendPosi[0], //可设定图例在上、下、居中
          // legend 不好做 放弃
          //     itemGap: 20,
          //     top: 20,
          //     left: '10%',
          //     // itemWidth: 14,
          //     itemHeight: 14,
          //     data: [
          //         {
          //             name: '男',
          //             icon: 'roundRect',
          //         },
          //         {
          //             name: '女',
          //             icon: 'roundRect',
          //         },
          //         {
          //             name: '总人数',
          //             // icon: 'triangle',
          //         }
          //     ],
          //     textStyle: {
          //         color: "#fff",
          //     }
        },
        /**区域位置*/
        grid: this.grid,
        //X轴
        xAxis: {
          data: this.source.name,
          type: "category",
          axisLine: {
            show: false,
            lineStyle: {
              color: "rgba(255,255,255,1)",
              shadowColor: "rgba(255,255,255,1)",
              shadowOffsetX: "20",
            },
            symbol: ["none", "arrow"],
            symbolOffset: [0, 25],
          },
          axisLabel: {
            margin: 10,
            fontSize: 12,
            color: "#dddddd",
          },
          splitLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
        },
        yAxis: {
          type: "value",
          show: true,
          splitNumber: 4,
          axisLine: {
            show: false,
          },
          splitLine: {
            show: false,
            lineStyle: {
              type: "dashed",
              color: "#075858",
            },
          },
          axisLabel: {
            color: "#dddddd",
            margin: 30,
            fontSize: 15,
          },
        },
        series: seriesData,
      };

      let chartDom = document.getElementById(this.eleId);
      let myChart = echarts.init(chartDom);
      myChart.setOption(this.options);
    },
    checkDomExist() {
      if (this.eleId === undefined) {
        alert("请指定的eleId");
        return;
      }
      let chartDom = document.getElementById(this.eleId);
      if (chartDom !== null) {
        this.setOption();
      } else {
        // 如果取不到DOM，过会儿重试
        setTimeout(() => {
          this.checkDomExist();
        }, 200);
      }
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped></style>
